<template>
    <basic-container>
        <avue-tabs :option="option" @change="handleChange"></avue-tabs>
        <baseInfo v-if="type.prop === 'tab1'"></baseInfo>
        <projectIntroduction v-else-if="type.prop === 'tab2'"></projectIntroduction>
        <distributionConfig v-else-if="type.prop === 'tab3'"></distributionConfig>
        <resetWithdrawal v-else-if="type.prop === 'tab4'"></resetWithdrawal>
        <SUNPAY v-else-if="type.prop === 'tab5'"></SUNPAY>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">

import { reactive, ref } from 'vue';
import baseInfo from '@/views/configPage/params/baseInfo.vue'
import projectIntroduction from '@/views/configPage/params/projectIntroduction.vue'
import distributionConfig from '@/views/configPage/params/distributionConfig.vue'
import resetWithdrawal from '@/views/configPage/params/resetWithdrawal.vue'
import SUNPAY from '@/views/configPage/params/SUNPAY.vue'
const type = ref('')
let option: any = reactive({
    column: [{
        icon: 'el-icon-info',
        label: '基本信息',
        prop: 'tab1',
    }, {
        icon: 'el-icon-warning',
        label: '项目介绍',
        prop: 'tab2',
    }, {
        icon: 'el-icon-question',
        label: '分销配置',
        prop: 'tab3',
    }, {
        icon: 'el-icon-question',
        label: '重置提现',
        prop: 'tab4',
    },
    {
        icon: 'el-icon-question',
        label: 'SUNPAY',
        prop: 'tab5',
    }

    ]
})
type.value = option.column[0];
let crudData: any = reactive({
    loadingSubmit: false,
    loadingSave: false,
    index_unit: [],
    loading: true,
    active: 1,
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    filedArr: [],
    data: []
})
const handleChange = (column) => {
    type.value = column
}
</script>
<style scoped lang="scss">
$--el-color-primary: #4e9876;
::v-deep .avue-tabs__ink-bar {
  background-color:#4e9876;
}
::v-deep .el-tabs__item {
    color: #626262;
    font-weight: bold;
}

::v-deep .el-tabs__item.is-active {
    color: #4e9876;
    font-weight: bold;
    font-size: 16px;
}

::v-deep .el-tabs__item:hover {
    color: #4e9876;
}</style>